<template>
  <div id="views">
    <section class="sct1">
      <p class="textCenter all">累计产出(BTC)</p>
      <p class="textCenter coins_num">{{totalRevenue}}</p>
<!--      <p class="sel_power_type">-->
<!--        <span class="active">BTC算力</span>-->
<!--        <span>IPFS算力</span>-->
<!--      </p>-->
      <div class="btcPower">
        <div class="allPower">
        <span class="left">
          <span class="middle">我的总算力</span><img src="../../common/imgs/iconnuex.png" alt="" @click="changeLog()" class="hoverhand showdialog middle">
        </span>
          <span class="right">{{total_power}}&nbsp;T</span>
        </div>
        <div class="basePower">
          <p class="p1">
            <span class="left">基础算力</span>
            <span class="right" @click="slideShow = !slideShow">
            <span class="middle">{{base_power}}&nbsp;T</span>
            <img src="../../common/imgs/arrow_top.png" alt="" v-if="slideShow" class="middle hoverhand">
            <img src="../../common/imgs/arrow_bottom.png" alt="" v-if="!slideShow" class="middle hoverhand">
          </span>
          </p>
          <transition name="draw">
            <div class="table flexStyle spaceBet" id="slideToggle" v-show="slideShow">
              <div>
                <p>可回购BTC算力</p>
                <p>{{topData.singleNum}}T</p>
              </div>
              <div>
                <p>不可回购BTC算力</p>
                <p>{{topData.highWavePower}}T</p>
              </div>
              <div>
                <p>BHP参配算力</p>
                <p>{{topData.doubleNum}}T</p>
              </div>
            </div>
          </transition>
        </div>
<!--        <div class="basePower">-->
<!--          <p class="p1">-->
<!--            <span class="left">奖励总算力</span>-->
<!--            <span class="right">-->
<!--            <span class="middle">{{rewardPower}}&nbsp;T</span>-->
<!--          </span>-->
<!--          </p>-->
<!--        </div>-->
      </div>
<!--      <div class="basePower">-->
<!--        <p class="p1" style="padding-top: 0.1rem">-->
<!--          <span class="left">邀请总算力</span>-->
<!--          <span class="right">-->
<!--            <span class="middle">{{invitePower}}&nbsp;T</span>-->
<!--          </span>-->
<!--        </p>-->
<!--      </div>-->
    </section>
    <section id="sec_select">
      <span class="hoverhand" :class="activeTabbar === 0 ? 'active' : ''" @click="activeTabbar = 0">经典BTC算力</span>
      <span class="hoverhand" :class="activeTabbar === 1 ? 'active' : ''" @click="activeTabbar = 1">加速产出BTC算力</span>
      <span class="hoverhand" :class="activeTabbar === 2 ? 'active' : ''" @click="activeTabbar = 2">IPFS</span>
    </section>
    <section class="set2" v-if="activeTabbar === 0">
      <ul>
          <li v-for="(item,index) in data" :key="item.orderId" :class="'index_'+index">
            <div class="child" style="position: relative">
<!--              <span style="position: absolute;bottom: 0.43rem;right: 0.25rem;font-size: 0.22rem">{{item.state2 == 2 ? '承接' : '购买'}}</span>-->
              <div class="p1">
                <span class="machineType">
                  <img src="../../common/imgs/danwa.png" alt="类型" v-if="item.isBhpPos == 0">
                  <img src="../../common/imgs/shuangwa.png" alt="类型" v-if="item.isBhpPos == 1">
                </span>
                <span class="machineName">
                  {{item.productName}}
                  ({{item.state2 == 2 ? item.continueTotalDeposit : item.totalDeposit}}
                  {{item.paymentCurrencyCode == 'BCNY' ? 'OTC余额' : item.paymentCurrencyCode}})
                </span>
                <span class="machineStatus isRun" v-if="item.dragStatus == 1">{{item.workText}}</span>
                <span class="machineStatus isStop" v-if="item.dragStatus == -1">{{item.workText}}</span>
                <span class="machineStatus waitDrug" v-if="item.dragStatus == 0 ">{{item.workText}}</span>
              </div>
              <p class="drugTime" style="padding-bottom: 0.18rem">
                <span>开挖时间：{{item.startTime}}</span>
                <span class="mark installment" v-if="item.flag.substring(1,2) == 1">分期购</span>
              </p>
              <p class="notEnoughTime" v-if="item.rownum && item.rownum > 0" style="padding-bottom: 0.18rem;font-size: 0.22rem;color: #ed5a5a;">
                续单库存不足，{{item.newRegularDateNum}}天锁定期排队中
              </p>
              <p class="p3" style="padding-top: 0.32rem">
                <span>BTC 总算力&nbsp;&nbsp;{{item.total_power}}{{item.rentpowerUnit}}</span>
                <span v-if="item.total_bhp_power > 0">BHP参配算力 {{item.total_bhp_power}}T</span>
                <span>合约份额&nbsp;&nbsp;{{item.num}}份</span>
              </p>
              <div class="btns flexStyle">
                <a href="javascript:void 0;" class="return" @click="Back(item)" v-if="item.is_return_label == 1">退单</a>
                <!--v-if="item.state2 == 1"-->
                <a href="javascript:void 0;" class="continue" @click="Continue(item)" v-if="item.dragStatus == 1 && item.flag.substring(1,2) != 1">续单</a>
              </div>
            </div>
          </li>
      </ul>
    </section>
    <section id="not_return" v-if="activeTabbar === 1" >
      <ul>
        <li v-for="(item,index) in data" :key="item.orderId" :class="'index_'+index">
          <router-link :to="{path:'/not_return_power_detail' , query:{orderId:item.orderId}}">
            <div class="p1">
            <span class="machineType">
              <img src="../../common/imgs/danwa.png" alt="类型" v-if="item.isBhpPos == 0">
              <img src="../../common/imgs/shuangwa.png" alt="类型" v-if="item.isBhpPos == 1">
            </span>
              <span class="machineName">
              {{item.productName}}
            </span>
              <span class="machineStatus isRun" v-if="item.dragStatus == 1">{{item.workText}}</span>
              <span class="machineStatus isStop" v-if="item.dragStatus == -1 ">{{item.workText}}</span>
              <span class="machineStatus waitDrug" v-if="item.dragStatus == 0 ">{{item.workText}}</span>
            </div>
            <div class="detailList">
              <span>
                <span>总金额</span>
                <span>
                  {{item.state2 == 2 ? item.continueTotalDeposit : item.totalDeposit}}
                  {{item.paymentCurrencyCode == 'BCNY' ? 'OTC余额' : item.paymentCurrencyCode}}
                </span>
              </span>
              <span>
                <span>BTC&nbsp;总算力</span>
                <span>
                  {{item.total_power}} {{item.rentpowerUnit}}
                </span>
              </span>
              <span>
                <span>开挖时间</span>
                <span class="time">{{item.startTime}}</span>
              </span>
              <span v-if="Number(item.total_bhp_power) > 0">
                <span>BHP参配算力</span>
                <span>{{item.total_bhp_power}}T</span>
              </span>
              <span>
                <span>合约到期</span>
                <span class="time">{{item.endTime==null? "":item.endTime}}</span>
              </span>
            </div>
          </router-link>
        </li>
      </ul>
    </section>
    <section class="set2" v-if="activeTabbar === 2">
      <ul>
        <li v-for="(item,index) in data" :key="item.orderId" :class="'index_'+index">
          <div class="child" style="position: relative;min-height: auto;">
            <div class="p1">
              <span class="machineType">
                <img src="../../common/imgs/danwa.png" alt="类型" v-if="item.isBhpPos == 0">
                <img src="../../common/imgs/shuangwa.png" alt="类型" v-if="item.isBhpPos == 1">
              </span>
              <span class="machineName">
                  {{item.productName}}
                  ({{item.state2 == 2 ? item.continueTotalDeposit : item.totalDeposit}}
                  {{item.paymentCurrencyCode == 'BCNY' ? 'OTC余额' : item.paymentCurrencyCode}})
              </span>
              <span class="machineStatus isRun" v-if="item.dragStatus == 1">{{item.workText}}</span>
              <span class="machineStatus isStop" v-if="item.dragStatus == -1 ">{{item.workText}}</span>
              <span class="machineStatus waitDrug" v-if="item.dragStatus == 0 ">{{item.workText}}</span>
            </div>
            <p class="drugTime">开挖时间：{{item.startTime}}</p>
            <p class="p3">
              <span>算力&nbsp;&nbsp;{{item.total_power}}{{item.rentpowerUnit}}</span>
              <span>合约份额&nbsp;&nbsp;{{item.num}}份</span>
            </p>
          </div>
        </li>
      </ul>
    </section>
    <div id="notOrder" v-if="notOrder">
      <!---->
      <img src="../../common/imgs/not_invite.png" alt="图片" v-if="activeTabbar == 2">
      <p v-if="activeTabbar == 2" style="padding-top: 0.25rem;font-size: 0.24rem;color: #999999">很遗憾，您还没有邀请到好友... </p>
      <!---->
      <img src="../../common/imgs/order_null.png" alt="图片" v-if="activeTabbar != 2">
    </div>
    <p class="loadToast" v-if="!notOrder">{{loadToastInfo}}</p>

    <!--我的总算力弹窗-->
    <transition name="fade">
      <div v-if="showPowerlog">
        <div class="publicCover"></div>
        <div class="dialog43" style="z-index: 11">
          <!-- 内容盒子 -->
          <div class='box'>
            <div class='top'>
              <p class='mt52' style="font-size:0.32rem;">
                <img src="../../common/imgs/iconleft.png" alt="">
                <span class='title'>算力统计</span>
                <img src="../../common/imgs/iconright.png" alt="">
              </p>
              <p class='pl ct'><span><i></i>累计购买基础算力</span><span>{{myPower.basePower}}T</span></p>
              <p class='pl ct'><span><i></i>累计退单基础算力</span><span>{{myPower.refund}}T</span></p>
            </div>
            <div class='top bottom' style="margin-top:0.3rem;">
              <p class='mt58'>
                <img src="../../common/imgs/iconleft.png" alt="">
                <span class='title'>当前奖励统计</span>
                <img src="../../common/imgs/iconright.png" alt="">
              </p>
              <p class='pl ct'>
                <span><i></i>浮动算力</span><span>{{myPower.floatPower}}T</span>
              </p>
              <p class='pl ct'><span><i></i>期货算力</span><span>{{myPower.futuresPower}}T</span></p>
              <p class='pl ct'><span><i></i>达标算力</span><span>{{myPower.pePower}}T</span></p>
              <p class='pl ct'><span><i></i>定期算力</span><span>{{myPower.regularPower}}T</span></p>
            </div>
            <div class='closeBtn'>
              <img src="../../common/imgs/iconex.png" alt="" @click="changeLog()" class="hoverhand">
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!---->

    <!--续单弹窗-->
    <transition name="slide">
      <div class="continue_window" v-show="showContinue && daysArr.length > 0">
        <div class="c1">
          <p>
            <span class="floatleft">BTC算力</span>
            <span class="floatright">{{continueWinData.total_power}}T</span>
          </p>
          <p v-if="continueWinData.total_bhp_power > 0">
            <span class="floatleft">BHP参配算力</span>
            <span class="floatright">{{continueWinData.total_bhp_power}}T</span>
          </p>
        </div>
        <div class="c2">
          <p class="title">续单天数</p>
          <div class="checkes">
            <label :for="'day'+item.days" v-for="(item , index ) in daysArr" v-if="item.days > 0">
              <input v-model="checkedIndex" :value="index" type="radio" :id="'day'+item.days" name="dayType" :checked="index == checkedIndex">
              <span class="days">{{item.days}}天</span>
            </label>
          </div>
          <div class="notEnough">
            <p>
              <span class="left">续单库存</span>
              <span class="right">{{daysArr.length > 0 ? daysArr[checkedIndex].reletNum : ''}}T</span>
            </p>
            <p class="notice" v-if="daysArr.length>0 && ( continueWinData.total_base_power > daysArr[checkedIndex].reletNum )">
<!--              v-if="daysArr.length>0 && continueWinData.total_base_power > daysArr[checkedIndex].reletNum"-->
              <img src="../../common/imgs/orangegth.png" alt="">
              <span>续单库存不足,请选择其它锁定期或在APP排队续单</span>
            </p>
          </div>
          <div class="canGetPower">
            <p>
              <span class="floatleft">BTC算力</span>
              <span class="floatright">{{afterMathBtc}}T</span>
            </p>
            <p v-if="continueWinData.total_bhp_power > 0">
              <span class="floatleft">BHP参配算力</span>
              <span class="floatright">{{continueWinData.total_bhp_power}}T</span>
            </p>
          </div>
        </div>
        <div class="btns">
          <a href="javascript:void 0;" class="no" @click="hideContinueWin">取消</a>
          <a href="javascript:void 0;" class="yes" @click="confirmContinue">确认续单</a>
        </div>
      </div>
    </transition>
    <!---->
    <!--退单弹窗-->
    <transition name="slide">
      <div v-show="showReturnWin" class="returnWin">
        <div class="c1">
          <p>
            <span class="floatleft">BTC算力</span>
            <span class="floatright">{{continueWinData.back_power}}T</span>
          </p>
          <p v-if="continueWinData.back_bhp_power && Number(continueWinData.back_bhp_power) > 0">
            <span class="floatleft">BHP参配算力</span>
            <span class="floatright">{{continueWinData.back_bhp_power}}T</span>
          </p>
        </div>
        <div class="c2">
          <div class="p1">
            <span class="left">退单份额</span>
            <span class="rightInput">
            <span class="add hoverhand" @click="function(){if(returnNum < continueWinData.num ) returnNum++}">+</span>
            <input type="number" class="num" v-model="returnNum"  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'');value = value == 0 ? 1 : value;">
             <span class="delete hoverhand" @click=" function() {if(returnNum > 1) returnNum--}">-</span>
          </span>
          </div>
          <div class="p2">
            <span class="left floatleft">退单金额</span>
            <span class="right floatright">{{returnMoney}} {{continueWinData.paymentCurrencyCode}}</span>
          </div>
          <p class="reminder">退单金额在【我的账户】中查看</p>
          <div class="btns">
            <a href="javascript:void 0;" class="no" @click="cancelReturn">取消</a>
            <a href="javascript:void 0;" class="yes" @click="confirmReturn">确认退单</a>
          </div>
        </div>
      </div>
    </transition>
    <!---->

<!--    <div class="publicCover" ></div>-->
    <div class="publicCover" v-if="showCover"></div>
  </div>
</template>
<script>
  import { myOrderList , ipfsContract , myPower , getOrderContinueMes , continueOrder , orderReturn } from '../../http/api';

  export default {
    name: 'my_power',
    inject : ['reload'],
    data() {
      return {
        introduce: '我的算力',
        loadToastInfo: '加载中...',
        showPowerlog : false,
        deleteAnimate: '',
        page: 0,
        out : true,
        totalPage: 1,
        curLi: '',
        data: [],//列表
        total_power: '',//总算力
        base_power: '',//基础算力
        // invitePower : '' ,//邀请算力
        rewardPower : '',//获赠算力
        totalRevenue : '',//累计产出BTC
        notOrder : false,//是否显示空订单
        acceptLoad : false,//底部加载更多限制
        singleNum : '',//单挖算力
        highWavePower : '',//不可回购
        activeTabbar : 0,
        not_return : '0' , //矿机加载类型   0 可回购 1不回购  ALL全部
        type : 'ALL',
        myPower:'',//算力数据
        slideShow : true,
        showCover : false,
        showContinue : false,
        daysArr : [],//续单的天数数组
        checkedIndex : 10,
        afterMathBtc : 0,//选择续单天数的btc T数
        continueWinData:'',//续单弹窗数据、退单数据
        returnNum : 0,//退单数量
        showReturnWin : false,
        returnMoney : '',
        topData : '',
      }
    },
    mounted() {
      this.reloadPage();
    },
    watch:{
      activeTabbar( index ){
        let thiz = this;
        thiz.loadToastInfo = '加载中...';
        thiz.data = [];
        thiz.page = 0;
        thiz.totalPage = 1;
        thiz.notOrder = false;
        thiz.type = index == 2 ? 'G' : 'ALL';
        thiz.not_return = index ==2 ? 'ALL' : index;
        if(index == 2){
          ipfsContract().then(res => {
            if(res.code == 200){
              let url = res.data.url;
              window.location.href = url;
            }
          })
        }else{
          thiz.loadlist();
        }
      },
      checkedIndex(index){
        let thiz = this;
        let val = thiz.daysArr[index];
        let continueWinData = thiz.continueWinData;
        continueWinData.total_base_power = thiz.accMul(continueWinData.basePower , continueWinData.num);
        let computingPower = continueWinData.computingPower;//总算力
        let regularPower =  continueWinData.regularPower;
        let sub1 = thiz.accSub(computingPower , regularPower);
        let isFloatPower = continueWinData.isFloatPower;
        if(isFloatPower == 1){
          sub1  = thiz.accSub(sub1 , continueWinData.floatPower);
          let sub2 = thiz.accMul(continueWinData.basePower , val.floatPower);
          sub1  = thiz.accAdd(sub1 , sub2);
        }
        let sub3 = thiz.accMul(continueWinData.basePower , val.regularPower);
        sub1  = thiz.accAdd(sub1 , sub3);
        sub1  = thiz.accMul(sub1 , continueWinData.num);
        thiz.afterMathBtc = sub1;
      },
      returnNum ( val ){
        val = val < 0 ? 1 : val;
        let continueWinData = this.continueWinData;
        val = val > continueWinData.num ? continueWinData.num : val;
        this.returnNum = val;
        if(continueWinData.unit_bhp_power && continueWinData.unit_bhp_power > 0){
          continueWinData.back_bhp_power = this.numSlice(this.accMul(continueWinData.unit_bhp_power , val) , 2)
        }
        if(continueWinData.unit_power && continueWinData.unit_power > 0){
          continueWinData.back_power = this.numSlice(this.accMul(continueWinData.unit_power , val) , 2 )
        }
        let thiz = this;
        thiz.continueWinData = continueWinData;
        console.log('continueWinData',continueWinData.unit_power)
        this.returnMoney = thiz.accMul( val , continueWinData.productDeposit);
      },
    },
    methods: {
      Continue(item){
        let thiz = this;
        getOrderContinueMes().then( res => {
          thiz.daysArr = res.data;
          thiz.showCover = true;
          thiz.showContinue = true;
          thiz.continueWinData = item;
          thiz.checkedIndex = 0;
        })
      },
      confirmReturn(){
        let thiz = this;
        if(!thiz.returnNum || thiz.returnNum  < 1){
          require('../../common/js/toast').toast('请输入退单数量');
          return;
        }
        orderReturn({orderId : thiz.continueWinData.orderId , num : thiz.returnNum}).then(res => {
          if(res.code == 200){
            require('../../common/js/toast').toast('退单成功');
            thiz.timeout(function () {
              thiz.reloadPage();
            },1500)
          }
        })
      },
      reloadPage(){
        let thiz = this;
        thiz.cancelReturn();
        thiz.page = 0;
        thiz.totalPage = 1;
        thiz.not_return = 0;
        thiz.data = [];
        let https = [
          myPower({ noLoading : true}).then( res => {
            if( res.code == 200){
              let data = res.data;
              thiz.myPower = data;
              thiz.topData = data;
              thiz.total_power = data.totalPower;
              thiz.base_power = data.basePower;
              thiz.totalRevenue = data.totalRevenue;
              // thiz.invitePower = data.invitePower;
              thiz.rewardPower = data.rewardPower;
              thiz.singleNum = data.singleNum;
              thiz.doubleNum = data.doubleNum;
              thiz.highWavePower = data.highWavePower;
              // let slideToggle = document.getElementById('slideToggle');
              // slideToggle.style.height = slideToggle.offsetHeight +'px';
            }
          }),
          thiz.loadlist({noLoading : true })
        ];
        thiz.loading();
        Promise.all( https ).then( res => {
          thiz.closeLoading();
          window.addEventListener('scroll',thiz.loadMore,true);
        })
      },
      cancelReturn(){
        let thiz = this;
        thiz.showReturnWin = false;
        thiz.timeout(function () {
          thiz.showCover = false;
        },300)
      },
      hideContinueWin(){
        let thiz = this;
        thiz.showContinue = false;
        thiz.timeout(function () {
          thiz.showCover = false;
        },300)
      },
      Back(item){
        let thiz = this;
        if(item.total_power && item.total_power > 0){
          item.unit_power = this.accDiv( item.total_power , item.num)
        }
        if(item.total_bhp_power && item.total_bhp_power > 0){
          item.unit_bhp_power = this.accDiv( item.total_bhp_power , item.num)
        }
        thiz.continueWinData = item;
        thiz.showCover = true;
        thiz.showReturnWin = true;
        thiz.returnNum = 1;
      },
      confirmContinue(){
        let thiz = this;
        let machine = thiz.continueWinData;
        let daysArr = thiz.daysArr;
        let checkIndex = thiz.checkedIndex;
        continueOrder({orderId : machine.orderId , type : daysArr[checkIndex].days}).then(res => {
          if(res.code == 200){
            require('../../common/js/toast').toast('续单成功');
            thiz.timeout(function () {
              thiz.reload();
            },1500)
          }
        })
      },
      changeLog(){
        this.showPowerlog = !this.showPowerlog;
      },
      packageList(data) {
        //格式化列表
        let thiz = this;
        for (let i in data) {
          let item = data[i];
          // item.total_power = this.accMul(item.computingPower, item.num); //单份算力 * 数量
          // item.total_base_power = this.accMul(item.basePower, item.num); //单份基础算力 * 数量
          if (item.currencyCode == "BTC") {
            item.rentpowerUnit = "T";
          } else {
            item.rentpowerUnit = "M";
          }
          item.base_power = item.basePower;//基础算力
          // item.total_power = thiz.accMul(item.basePower, item.num);//总算力(基础)
          item.total_power = thiz.accMul(item.computingPower , item.num);
          item.total_base_power = thiz.accMul(  item.base_power,  item.num );
          item.total_regular_power = thiz.accSub(item.total_power, item.total_base_power);
          item.total_bhp_power = thiz.accMul( item.bhpPower ? item.bhpPower : 0,  item.num );
        }
        thiz.data = data;
      },
      loadStyle(){
        let thiz = this;
        if(  thiz.totalPage <=1 && thiz.data.length  === 0){
          thiz.notOrder = true;
        }else{
          if (thiz.page >= thiz.totalPage) {
            thiz.loadToastInfo = '到底了...';
          } else {
            thiz.loadToastInfo = '加载更多...';
          }
        }
      },
      loadlist( noLoading ) {
        let thiz = this;
        thiz.acceptLoad = false;
        if (thiz.page < thiz.totalPage) {
          thiz.loadToastInfo = '加载中...';
          let params = {page: thiz.page + 1, pageSize: 10, type: thiz.type ,not_return : thiz.not_return };
          if( noLoading ){
            params.noLoading = true;
          }
          return myOrderList(params).then(res => {
              if (res.code == 200) {
                thiz.acceptLoad = true;
                let orderList = res.data.orderList;
                let newData = thiz.data.concat(orderList);
                thiz.packageList(newData);
                thiz.totalPage = res.data.totalPage;
                thiz.page = thiz.page + 1;
                thiz.loadStyle();
              }
          });
        }
      },
      loadMore(){
        let thiz = this;
        thiz.toBottom( res => {
          if( thiz.acceptLoad ){
            thiz.loadlist()
          }
        });
      },
    },
    beforeDestroy() {
      let thiz = this;
      window.removeEventListener('scroll', thiz.loadMore , true);
    },
  }
</script>
<style type="text/less" lang="less" scoped>
  .continue_window{
    position: fixed;z-index: 11;left: 0.77rem;top:50%;background: #fff;border-radius: 0.08rem;overflow: hidden;
    width: calc( 100% - 1.54rem );-webkit-transform: translateY(-50%);transform: translateY(-50%);padding-bottom: 1rem;
    /*min-height: 5.14rem;*/
    >.c1{
      background: #F6F6F6;padding: 0.3rem;color: #898989;
      >p{
        padding-top: 0.27rem;overflow: hidden;
        >span:last-child{
          color: #262626;
        }
      }
      >p:first-child{
        padding-top: 0;
      }
    }
    >.c2{
      padding: 0.3rem;
      >.title{
        font-size: 0.24rem;font-family: PingFang-SC-Bold;
      }
      >.checkes{
        padding-top: 0.15rem;overflow: hidden;
        >label{
          position: relative;padding-left: 0rem;float: left;width: 25%;padding-top: 0.15rem;
          >span{
            position: relative;padding-left: 0.42rem;line-height: 0.3rem;font-size: 0.24rem;display: inline-block;height: 0.3rem;
          }
          >span::before{
            position: absolute;z-index: 1;left: 0;width: 0.3rem;height: 0.3rem;border-radius: 50%;border: 0.015rem solid#E5E5E5;content: '';display: block;top:0;box-sizing: border-box;
          }
          >input{
            opacity: 0;position: absolute;left: 0;width: 100%;height: 100%;top:0;z-index: 2;
          }
          >input:hover{
            cursor: pointer;
          }
          >input:checked+span:before{
            position: absolute;z-index: 1;left: 0;width: 0.3rem;height: 0.3rem;border-radius: 50%;content: '';display: block;top:0;box-sizing: border-box;border: 0.06rem solid#FFCD1D;
          }
        }
        >label:nth-child(4n+1){
          padding-left: 0;
        }
      }
      .notEnough{
        padding-top: 0.36rem;
        >p:first-child{
          overflow: hidden;
          >.left{
            font-size: 0.28rem;color: #898989;float: left;text-align: left;
          }
          >.right{
            float: right;color: #FF5353;font-size: 0.28rem;
          }
        }
        >.notice{
          color:#DD9217;padding-top: 0.16rem;
          >img{
            width: 0.22rem;vertical-align: middle;
          }
          >span{
            vertical-align: middle;font-size: 0.22rem;
          }
        }
      }
      >.canGetPower{
        color: #898989;;padding-top: 0.4rem;
        >p{
          padding-top: 0.27rem;overflow: hidden;
          >span:last-child{
            color: #262626;
          }
        }
        >p:first-child{
          padding-top: 0;
        }
      }
    }
    >.btns{
      position: absolute;z-index: 1;bottom: 0;left: 0;text-align: center;width: 100%;padding-bottom: 0.4rem;
      >a{
        width: 2rem;border-radius: 1rem;height: 0.6rem;text-align: center;line-height: 0.6rem;background: #FFD203;font-size: 0.24rem;
      }
      >.yes{
        margin-left: 0.48rem;
      }
      >.no{
        background: none;border: 0.015rem solid#DCDCDC;
      }
    }
  }
  .returnWin{
    position: fixed;z-index: 11;left: 0.77rem;top:50%;background: #fff;border-radius: 0.08rem;overflow: hidden;
    width: calc( 100% - 1.54rem );-webkit-transform: translateY(-50%);transform: translateY(-50%);
    >.c1{
      background: #F6F6F6;padding: 0.3rem;color: #898989;
      >p{
        padding-top: 0.27rem;overflow: hidden;
        >span:last-child{
          color: #262626;
        }
      }
      >p:first-child{
        padding-top: 0;
      }
    }
    >.c2{
      padding: 0.2rem 0.3rem;
      .p1>.left{
        line-height: 0.46rem;height: 0.46rem;display: inline-block;font-size: 0.24rem;
      }
      .rightInput{
        float: right;overflow: hidden;display: inline-block;
        >span,>input{
          float: right;background: #F3F3F3;text-align: center;height: 0.46rem;display: inline-block;margin-right: 0.1rem;
        }
        >input{
          width: 1.2rem;font-size: 0.3rem;padding: 0 0.1rem;
        }
        >span{
          width: 0.46rem;font-size: 0.36rem;line-height: 0.46rem;
        }
        >.add{
          margin-right: 0;
        }
      }
      >.p2{
        overflow: hidden;padding: 0.2rem 0;
        >span{
          line-height: 0.46rem;
        }
        >.left{
          font-size: 0.24rem;color: #262626;
        }
        >.right{
          color: #EA411F;font-size: 0.28rem;
        }
      }
      >.reminder{
        color: #999999;font-size: 0.22rem;padding: 0.4rem 0;padding-bottom:0;text-align: center;
      }
      >.btns{
        text-align: center;padding: 0.21rem 0;
        >a{
          width: 2rem;border-radius: 1rem;height: 0.6rem;text-align: center;line-height: 0.6rem;background: #FFD203;font-size: 0.24rem;
        }
        >.yes{
          margin-left: 0.48rem;
        }
        >.no{
          background: none;border: 0.015rem solid#DCDCDC;
        }
      }
    }
  }
  @media screen and (min-width: 1025px) {
    .continue_window,.returnWin{
      width: calc( 600px - 3rem );left:50%;margin-left: calc( 1.5rem - 300px );
    }
  }
  .sct1 {
    background: #fff;padding: .3rem;padding-top: 0;
    .allPower{
      font-size: 0.28rem;overflow: hidden;padding: 0.4rem 0;
      background: url("../../common/imgs/power_hidden.png") bottom center no-repeat;background-size: 100% auto;padding-top: 0.1rem;
      >.left{
        display: inline-block;float: left;position: relative;padding-right: 0.34rem;
        .showdialog{
          width: 0.24rem;height: 0.24rem;position: absolute;z-index: 1;
          right: 0;margin-left: 0.32rem;top:50%;margin-top: -0.12rem;
        }
      }
      .right{
        float: right;
      }
    }
    >.btcPower >.basePower{
      >.p1{
       overflow: hidden;padding: 0 0.2rem ;padding-top: 0.28rem;padding-bottom: 0.16rem;
       >.left{
         color: #999999;font-size: 0.28rem;float: left;line-height: 0.35rem;content: '        ';
       }
       >.right{
         float: right;font-size: 0.26rem;line-height: 0.35rem;
         img{
           width: 0.22rem;margin-left: 0.1rem;
         }
       }
     }
      >.table{
        background: #FAFAFA;padding: 0.38rem 0.24rem;padding-bottom: 0.26rem;overflow: hidden;border-radius: 0.04rem;
        >div{
          float: left;text-align: center;
          >p:first-child{
            color: #979797;font-size: 0.22rem;
          }
          >p:last-child{
            color: #301405;font-size: 0.28rem;padding-top: 0.22rem;
          }
        }
        >div:last-child{
          float: right;
        }
      }
    }
    > .all {
      font-size: .24rem;color: #898989;padding-top: .6rem;font-family: PingFang-SC-Regular
    }
    > .coins_num {
      color: #181818;font-size: .4rem;padding-top: .3rem;padding-bottom: .48rem
    }
  }
  .set2 {
    padding: 0 0.3rem 0rem 0.3rem;
    li {
      padding-top: 0.3rem;overflow: hidden;
      > div {
        background: #fff;border-radius: 0.04rem;overflow: hidden;padding: 0.34rem 0.24rem;position: relative;text-align: left;padding-bottom: 0.43rem;
        min-height: 2.5rem;
        .p1 {
          overflow: hidden
        }
        .machineType {
          font-size: .24rem;border-radius: 0.04rem;padding: 0rem 0.12rem;float: left;line-height: 0.35rem;padding-left: 0;
          img{height: 0.3rem;width: auto}
        }
        .machineName {
          font-size: 0.30rem;float: left;line-height: 0.35rem;padding-left: 0rem;display: inline-block;width: 75%;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .machineStatus {
          float: right;font-size: 0.28rem;line-height: 0.35rem;
        }
        .isRun {
          /*开挖中*/
          color: #2FC68F;font-size: 0.24rem;
        }

        .isStop {
          /*停租*/
          color: #ED5A5A;font-size: 0.24rem;
        }
        .waitDrug{
          //待挖
          color:#43b1f9;font-size: 0.24rem;
        }
      }

      .drugTime {
        color: #9B9B9B;line-height: 100%;padding-top: 0.18rem;padding-bottom: 0.4rem;font-size: 0.22rem;overflow: hidden;
        >span{
          float: left;line-height: 0.3rem;vertical-align: middle;
        }
        >.mark{
          margin-left: 0.12rem;
        }
        >.installment{
          padding:0 0.07rem;background: #FFEDE9;color: #C2382B;font-size: 0.18rem;float: left;display: inline-block;height: 0.3rem;
        }
      }
      .setting {
        position: absolute;z-index: 1;right: 0.24rem;bottom: 0.3rem;width: 1.34rem;height: 0.6rem;border-radius: 1rem;font-size: 0.26rem;background: #f5f5f5;
      }
      .p3 {
        font-size: 0.22rem;color: #4b4b4b;overflow: hidden;width: calc( 100% - 1.82rem );
        >span{
          float: left;padding-top: 0.22rem;width: 50%;display: inline-block;
        }
        >span:nth-child(1),>span:nth-child(2){
          padding-top: 0;
        }
        >span:nth-child(2n+2){
          float: right;
        }
      }
    }
    .hideLi{
      display: none;
    }
    .delThis{
      transform: translate3d(-100%, 0, 0);-webkit-transition: all 0.4s; transition: all 0.4s;
    }
    .btns{
      position: absolute;right: 0;bottom: 0rem;padding-right: 0.24rem;padding-bottom: 0.3rem;
      width: 1.58rem;align-items: flex-end;-webkit-align-items: flex-end;flex-direction: column;-webkit-flex-direction: column;
      >a{
        width: 1.34rem;display: block;height: 0.56rem;border-radius: 1rem;font-size: 0.22rem;text-align: center;line-height: 0.56rem;
      }
      >.continue{
        background: #FFD203;margin-top: 0.16rem;
      }
      >.return{
        background: #EEEEEE;
      }
    }
  }
  #not_return{
    padding: 0 0.3rem;
    li {
      margin-top: 0.25rem;
      >a{
        display: block;padding-top: 0rem;overflow: hidden;background: #fff;padding-bottom: 0.35rem;
        > div {
          background: #fff;border-radius: 0.04rem;overflow: hidden;padding: 0.34rem 0.24rem;position: relative;text-align: left;
          .p1 {
            overflow: hidden
          }
          .machineType {
            font-size: .24rem;border-radius: 0.04rem;padding: 0rem 0.12rem;float: left;line-height: 0.35rem;padding-left: 0;
            img{height: 0.3rem;width: auto;vertical-align: middle}
          }
          .machineName {
            font-size: 0.30rem;float: left;line-height: 0.35rem;padding-left: 0rem;display: inline-block;width: 75%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .machineStatus {
            float: right;font-size: 0.28rem;line-height: 0.35rem;
          }
          .isRun {
            /*开挖中*/
            color: #2FC68F;
          }
          .isStop {
            /*停租*/
            color: #ED5A5A;
          }
          .waitDrug{
            //待挖
            color:#43b1f9;
          }
        }
        .drugTime {
          color: #9B9B9B;line-height: 100%;padding-top: 0.22rem;padding-bottom: 0.4rem;font-size: 0.26rem
        }
        .setting {
          position: absolute;z-index: 1;right: 0.24rem;bottom: 0.3rem;width: 1.34rem;height: 0.6rem;border-radius: 1rem;font-size: 0.26rem;background: #f5f5f5;
        }
        .p3 {
          font-size: 0.28rem;color: #4b4b4b;
          > span:last-child {
            padding-left: 0.58rem
          }
        }
        .detailList{
          overflow: hidden;padding: 0 0.24rem;
          >span{
            display: inline-block;text-align: left;float: left;font-size: 0.22rem;color: #9B9B9B;
            padding: 0.1rem 0;
            >span:first-child{
              padding-right: 0.1rem;
            }
            >span:last-child{
              color: #595656;
            }
            >.time{
              font-size: 0.2rem;
            }
          }
          >span:nth-child(2n+1){
            text-align: left;width: 50%;float: left;
          }
          >span:nth-child(2n+2){
            text-align: left;width: 50%;float: right;padding-left: .1rem;
          }
        }
      }
    }
  }
  .loadToast {
    padding: 0.3rem 0
  }
  #notOrder{
    text-align: center;padding-top: 1rem;padding-bottom: 1rem;
    img{
      width: 2.62rem;
    }
  }
  #sec_select{
    padding: 0 0.3rem;padding-bottom: 0.3rem;text-align: center;padding-top: 0.34rem;overflow: hidden;
    >span{
      color: #999999;font-size: 0.28rem;padding-bottom: 0.14rem;padding-top: 0.34rem;
    }
    >.active{
      color: #262626;position: relative;
    }
    >.active:after{
      content: '';display: block;width: 100%;height: 0.04rem;background: #FFDA34;position: absolute;z-index: 1;bottom: 0;left:0;
    }
    >span:nth-child(2){
      margin: 0 0.5rem;
    }
  }

  .sct1 >.btcPower > .basePower {
    > .draw-enter-active, >.draw-leave-active {
      transition: all 0.25s ease;
    }
    >.draw-enter, >.draw-leave-to /* .fade-leave-active below version 2.1.8 */ {
      height: 0;
    }
  }
  /**/
  .fade-enter,.fade-leave-to{
    opacity: 0;
  }
  .fade-enter-to,.fade-leave{
    opacity: 1;
  }
  .fade-enter-active,.fade-leave-active{
    transition: all 0.2s;
  }
  /**/
  .table{
    height: 1.36rem;
  }
  /*.slide-enter-active, .slide-leave-active {*/
  /*  transition: all 0.3s ease;*/
  /*}*/
  /*.slide-enter, .slide-leave-to !* .fade-leave-active below version 2.1.8 *! {*/
  /*  height: 0;*/
  /*}*/
  /**/
  .dialog43{
    position: fixed;z-index: 11;left: 50%;margin-left: -2.93rem;top:50%;margin-top:-3.47rem;
  }
  .dialog43>.box {
    box-sizing: border-box;
    width: 5.86rem;
    padding: 0.3rem 0;
    border-radius: 0.41rem;
    background-color: #fff;
    text-align: center;
    .top{
      >p:first-child{padding: 0.3rem 0}
      >p{
        text-align: center;
      }
    }
    .ct{
      padding: 0.1rem 1rem; overflow: hidden;
      >span:first-child{
        float: left;
      }
      >span:last-child{
        float: right;
      }
    }
  }
  .dialog43>.box>.top img {
    width: 0.35rem;
    height: 0.45rem;
  }
  .dialog43>.box .title {
    font-size: 0.36rem;
    font-weight: bold;
  }
  .dialog43>.box p i {
    display: inline-block;
    width: 0.08rem;
    height: 0.08rem;
    background: rgba(0, 0, 0, 1);
    margin-right: 0.08rem;
    transform: rotate(45deg);
    vertical-align: middle;
  }
  .dialog43>.box p.pl>span {
    font-size: 0.26rem;
    font-weight: bold;
    vertical-align: middle;
    font-family: Helvetica;
  }
  .dialog43>.box>.closeBtn {
    position: absolute;
    bottom: -1.05rem;
    left: 2.64rem;
  }
  .dialog43>.box>.closeBtn img {
    width: 0.6rem;
    height: 0.6rem;
  }
</style>
